import React from 'react';
import Draggable from 'react-draggable';
import '../assets/scss/dialog.scss';

interface ConfirmDialogProps {
    isOpen: boolean;
    title: string;
    message: string;
    onConfirm: () => void;
    onCancel: () => void;
}

const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
    if (!isOpen) return null;

    return (
        <div className="modal-overlay">
            <Draggable bounds="parent" handle=".modal-header">
                <div className="modal-dialog">
                    <header className="modal-header">
                        <h3 className="modal-title">{title}</h3>
                        <button className="close-button" onClick={onCancel}>
                            &times;
                        </button>
                    </header>
                    <p>{message}</p>
                    <div className="actions">
                        <button onClick={onCancel} className="cancel">取消</button>
                        <button onClick={onConfirm} className="confirm">确定</button>
                    </div>
                </div>
            </Draggable>
        </div>
    );
};

export default ConfirmDialog;